<script setup>
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus';
import router from "@/router/index.js";
import {post} from "@/util/axios.js";
import Identify from '@/components/captcha/Identify.vue';
import api from "./api.js";
import { captchaCode , generateCode } from '@/components/Captcha/captcha.js'
import backgroundOne from "@/components/background/bg1.vue";

// 表单引用
const formObj = ref();

// 表单数据
const registerForm = reactive({
    username: '',
    name: '',
    password: '',
    phone: '',
    email: '',
    sex: null,
    birthday: '',
    confirmPassword: '',
    captcha: captchaCode
});

const requestForm = reactive({
    username: '',
    name: '',
    password: '',
    phone: '',
    email: '',
    sex: 1,
    birthday: '',
    icon: '',
    active: 1,
    role: 0,
});

const giveForm = () => {
    requestForm.username = registerForm.username;
    requestForm.name = registerForm.name;
    requestForm.password = registerForm.password;
    requestForm.phone = registerForm.phone;
    requestForm.email = registerForm.email;
    requestForm.sex = registerForm.sex;
    requestForm.birthday = registerForm.birthday;
}

// 表单验证规则
const rules = {
    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
    phone: [
        {required: true, message: '请输入手机号', trigger: 'blur'},
        // {
        //     pattern: /^1[3-9]\d{9}$/,
        //     message: '请输入正确的手机号格式',
        //     trigger: 'blur',
        // },
    ],
    email: [
        {required: true, message: '请输入邮箱', trigger: 'blur'},
       // {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'},
    ],
    name: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
    birthday: [{required: true, message: '请选择生日', trigger: 'change'}],
    sex: [{required: true, message: '请选择性别', trigger: 'change'}],
    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
    confirmPassword: [
        {required: true, message: '请再次输入密码', trigger: 'blur'},
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur',
        },
    ],
    captcha: [{required: true, message: '请输入验证码', trigger: 'blur'}],
};


// 提交表单
const captchaTest = ref('');

const save = () => {
    giveForm()
    captchaTest.value = registerForm.captcha.toUpperCase()
    formObj.value.validate((valid) => {
        if (valid) {
            if (captchaTest.value === captchaCode.value) {
                post(api.register, requestForm, content => {
                    router.push('/login');
                }, formObj.value);
                generateCode()
            }else {
                generateCode()
                ElMessage.error('验证码错误');
            }
        }else {
            generateCode()
            ElMessage.error('请检查填写信息');
        }
    })
}

// 重置表单
const resetForm = () => {
    generateCode();
    formObj.value.resetFields();
};

</script>


<template>
    <div class="register-container">
        <backgroundOne/>
        <el-card class="register-card">
            <h2 class="register-title">用户注册</h2>
            <el-form :model="registerForm" :rules="rules" ref="formObj" label-width="100px">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <!-- 手机号 -->
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>

                <!-- 邮箱 -->
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <!-- 真实姓名 -->
                <el-form-item label="真实姓名" prop="name">
                    <el-input v-model="registerForm.name" placeholder="请输入真实姓名"></el-input>
                </el-form-item>

                <!-- 生日 -->
                <el-form-item label="生日" prop="birthday">
                    <el-date-picker
                            v-model="registerForm.birthday"
                            type="date"
                            placeholder="请选择生日"
                            value-format="YYYY-MM-DD"
                    ></el-date-picker>
                </el-form-item>

                <!-- 性别 -->
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="registerForm.sex">
                        <el-radio :value="1">男</el-radio>
                        <el-radio :value="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input
                            v-model="registerForm.password"
                            type="password"
                            placeholder="请输入密码"
                            show-password
                    ></el-input>
                </el-form-item>

                <!-- 确认密码 -->
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input
                            v-model="registerForm.confirmPassword"
                            type="password"
                            placeholder="请再次输入密码"
                            show-password
                    ></el-input>
                </el-form-item>

                <!-- 验证码 -->
                <el-form-item label="验证码" prop="captcha">
                    <div class="captcha-wrapper">
                        <el-input
                                style="height: 40px"
                                v-model="registerForm.captcha"
                                placeholder="请输入验证码"
                                class="captcha-input"
                                clearable
                        />
                        <Identify class="identify"/>
                    </div>
                </el-form-item>

                <!-- 提交按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="save">注册</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 已有账号？登录 -->
            <div class="login-link">
                已有账号？
                <router-link class="router-link" to="/login">立即登录</router-link>
            </div>
        </el-card>
    </div>
</template>


<style scoped>
.router-link {
    color: #6fb6ff;

    &:hover {
        color: #c8e1ff;
    }
}
.el-input {
    height: 40px;
}
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    //background: #a4e7ff;
}

.register-card {
    border-radius: 10px;
    width: 500px;
    padding: 20px;
}

.captcha-wrapper {
    display: flex;
    gap: 10px;
    height: 40px;
}

.register-title {
    text-align: center;
    margin-bottom: 20px;
}

.login-link {
    text-align: center;
    margin-top: 20px;
}
</style>